<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>view</title>
  <link rel="stylesheet" type="text/css" href="./lib/ol.css"/>
  <style>
    body, #map1, #map2{
      border: 0;
      margin: 0;
      padding: 0;
      font-size: 13px;
      overflow: auto;
    }
    #map1, #map2{
      width: 45%;
      height: 90%;
      float: left;
      border: 1px solid #f00;
    }
    .ol-layer:first-child {
      filter: blur(4px);
    }
  </style>
  <script type="text/javascript" src="./lib/ol.js"></script>

</head>
<body>
<div id="map1" class="map"></div>
<div id="map2" class="map"></div>
<script type="text/javascript">
  var view  = new ol.View({
    center: ol.proj.fromLonLat([98.633, 31.607]),
    zoom:4,
    minZoom:0,
    maxZoom:18
  });
  var map1 = new ol.Map({
    controls: ol.control.defaults({
      attribution: false
    }),
    target: 'map1',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.XYZ({
          url:'http://Webrd0{1-4}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1'
        })
      })
    ],
    view:view
  });
  var map2 = new ol.Map({
    controls: ol.control.defaults({
      attribution: false
    }),
    target: 'map2',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.XYZ({
          url: 'https://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
        })
      })
    ],
    view: view
  });
</script>
</body>
</html>